.wrap{
    margin-top: 10px;
    padding: {
      left: 10px;
      right: 10px;
    };
    :global(.head){
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }
    :global(.hot){
      margin-right: 5px;
      background-color: $color-grey;
      color: $theme-color;
      :global(.fa){
        margin-right: 5px;
        font-size: 14px;
      }
    }
    :global(.title){
      margin: 0;
      flex: 1;
      font: {
        size: 16px;
        weight: 400;
      }
      color: #000;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      &-expand{
        display: block;
        white-space: normal;
      }
    }
    :global(.body){
      display: flex;
      align-items: center;
      margin-top: 8px;
      font-size: 12px;
      color: $color-text-secondary;
      :global(span){
        margin-right: 8px;
        &:last-child{
          margin-right: 0;
        }
      }
      :global(.author){
        display: inline-flex;
        align-items: center;
        color: #000;
        :global(.fa){
          font-size: 16px;
          margin-right: 5px;
        }
      }
    }
    :global(.foot){
      overflow: hidden;
      height: 0;
      transition: height .3s;
      :global(.copyright) {
        margin-top: 5px;
        font-size: 12px;
        color: $color-text-secondary;
      }
      :global(.ban) {
        color: $theme-color;
        font-size: 14px;
        margin-right: 3px;
      }
      :global(.desc){
        margin-top: 5px;
        font-size: 12px;
        color: $color-text-secondary;
        line-height: 18px;
        white-space: pre-line;
      }
      :global(.tags){
        margin-top: 10px;        
      }
      :global(.vtag) {
        margin: {
          right: 10px;
          bottom: 6px;
        }
        padding: 8px 18px;
        color:#333;
        background-color: $color-grey;
        font-size: 12px;
      }
    }
}